<script setup lang="ts">
import { onMounted, ref } from "vue";
import { interpreter } from "@/api/request";
import { helperList } from "@/api/user";

interface Item {
  id: number;
  question: string;
  content: string;
}
const list = ref<Array<Item>>([]);

onMounted(async () => {
  const [err, res] = await interpreter(helperList());
  if (!err) {
    list.value = res.data;
  }
});
</script>

<template>
  <uv-collapse>
    <uv-collapse-item
      v-for="item in list"
      class="item"
      :key="item.id"
      :title="item.question"
      :name="item.content"
    >
      <text class="uv-collapse-content">{{ item.content }}</text>
    </uv-collapse-item>
  </uv-collapse>
</template>

<style lang="scss" scoped>
.uv-collapse-content {
  font-size: 14px;
  font-weight: 400;
  text-align: justify;
  line-height: 22px;
  box-sizing: border-box;
  padding: 0 20px;
}
::v-deep .uv-line {
  transform: translateX(30px) scaleY(0.5) !important;
}
::v-deep .uv-cell__body {
  &::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: #cbcdd9;
    margin-right: 10px;
  }
}
::v-deep .uv-cell__body {
  padding-top: 16px;
  padding-bottom: 16px;
}
::v-deep .uv-cell__title-text {
  font-size: 14px;
  color: #19191c;
}
</style>
